<?php
    echo '<h5></h5>'; 
    echo $this->Form->create('Reservation', array('action' => 'book'));
    echo '<div class="rowf1">';
        echo $this->Form->input('Reservation.name_guest', array('label' => 'Khách hàng', 'autocomplete' => 'off', 'placeholder' => 'Tên khách hàng ...'));
        echo $this->Form->input('Reservation.cmt', array('label' => 'Số CMT', 'autocomplete' => 'off', 'placeholder' => 'Số CMT ...'));
    echo '</div>';
    echo '<div class="rowf-option">';
        echo $this->Form->input('Reservation.status', array(
            'div' => false,
            'label' => false,
            'type' => 'radio',
            'legend' => false,
            'options' => array('1' => 'Nhận phòng', '2' => 'Đặt phòng'),
            'default' => '2'
        ));
    echo '</div>';
    echo '<div class="row">';
        echo $this->Form->input('Reservation.start', array('label' => 'Ngày vào', 'type'=>'text', 'class' => 'datepicker' , 'autocomplete' => 'off', 'placeholder' => 'yyyy-mm-dd'));
        echo '<div class="time">';
            $p = array();
            for ($i= 0; $i < 24; $i++) {
                $p[] = $i;
            }
            echo $this->Form->input('Reservation.ip',array(
                'label'=>'Lúc',
                'options' => array(
                    $p
                )
            ));
            $s = array();
            for ($j= 0; $j < 61; $j++) {
                $s[] = $j;
            }
            echo $this->Form->input('Reservation.is',array(
                'label'=>'h',
                'options' => array(
                    $s
                )
            ));
        echo '</div>';
    echo '</div>';
    
    echo '<div class="row">';
        echo $this->Form->input('Reservation.end', array('label' => 'Ngày ra','type'=>'text', 'class' => 'datepicker' ,'autocomplete' => 'off', 'placeholder' => 'yyyy-mm-dd'));
        echo '<div class="time">';
            $p = array();
            for ($i= 0; $i < 24; $i++) {
                $p[] = $i;
            }
            echo $this->Form->input('Reservation.op',array(
                'label'=>'Lúc',
                'options' => array(
                    $p
                )
            )).'<span style="margin-right: 55px;">h</span>';
        echo '</div>';
    echo '</div>';

    echo '<div class="rowf-option">';
    echo $this->Form->input('Reservation.type', array(
        'div' => false,
        'label' => false,
        'type' => 'radio',
        'legend' => false,
        'options' => array('1' => 'Theo cá nhân', '2' => 'Theo tập thể'),
        'default' => '1'
    ));
    echo '</div>';

    echo $this->Form->input('Reservation.rooms_id.',array(
        'label'=>'Phòng',
        'options' => array($room),
        'value' => $id
    ));
    echo $this->Form->input('Reservation.people', array('label' => 'Số người', 'type' => 'text', 'value' => 1));
    echo $this->Form->input('Reservation.prepay', array('label' =>'Trả trước','type'=>'text',
        'value' => 0));
    echo $this->Form->input('Reservation.sale', array('label' => 'Khuyến mãi','type'=>'text', 'value' => 0));
    echo $this->Form->input('Reservation.note', array('label' => 'Ghi chú','type'=>'text'));
    echo '<div class="row">';
        echo $this->Form->submit('OK',array('div' => false));
        echo $this->Form->input('Reset',array('type'=>'reset','label'=>false,'div' => false));
    echo '</div>';
    echo $this->Form->end();
?>
<style>
    h5{
        font-weight: normal;
        color: red;
        margin: 8px 0 14px 0;
        font-size: 11px;
    }
    form, input, select{
        font-size: 11px;
    }
    select{
        width: 42px;
        padding: 2px 0; 
    }
    .rowf1{
        overflow: hidden;
        margin: 10px 0 16px 0;
    }
    .rowf1 .input:first-child{
        float: left;
    }
    .rowf1 .input:first-child label{
        width: 70px;
        display: block;
        float: left;
    }
    .rowf1 .input:last-child{
        float: right;
    }
    .rowf1 .input:last-child label{
        margin-right: 10px;
    }
    #ReservationCmt{
        width: 84px;
    }
    input[type='text']{
        padding: 2px 4px;
        border: 1px solid #C0C0C0;
        width: 108px;
    }
    #ReservationBookForm .rowf-option{
        padding-left: 70px;
        overflow: hidden;
    }
    #ReservationBookForm .rowf-option input{
        margin-right: 8px;
    }
    #ReservationBookForm .rowf-option input:last-child{
        margin-left: 32px;
    }
    #ReservationBookForm .row{
        margin: 8px 0;
        overflow: hidden;
    }
    #ReservationBookForm .row > .input{
        float: left;
        overflow: hidden;
    }
    #ReservationBookForm .row > .input label{
        width: 70px;
        display: block;
        float: left;
    }
    #ReservationBookForm .row > .time{
        float: right;
        overflow: hidden;  
    }
    #ReservationBookForm .row > .time .input:first-child{
        float: left;
    }
    #ReservationBookForm .row > .time .input:first-child label{
        margin-right: 10px;
    }
    #ReservationBookForm .row > .time .input:last-child{
        float: right;
        margin-left: 6px;
    }
    #ReservationBookForm .row > .time .input:last-child label{
        margin-right: 15px;
    }
    #ReservationBookForm > .input{
        margin: 8px 0;
    }
    #ReservationBookForm > .input select{
        width: 118px;
    }
    #ReservationOp{
        margin-right: 8px;
    }
    label[for='ReservationOp']{
        margin-right: 10px!important;
    }
    #ReservationBookForm > .input label{
        width: 70px;
        display: block;
        float: left;
        margin-top: 2px;
    }
    #ReservationNote{
        width: 270px;
    }
    #ReservationBookForm > .row input[type='submit']{
        float: left;
        margin: 0 20px 0 69px;
        padding: 2px 18px;
    }
    #ReservationBookForm > .row #ReservationReset{
        padding: 2px 18px;
    }
</style>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd'
        });
        $("input[name='data[Reservation][type]']").change(function(event) {
            if($(this).is(":checked")){
                var id = $(this).attr('value');
                if(id == '1'){
                    $("#ReservationRoomsId").removeAttr('multiple');
                }else{
                    $("#ReservationRoomsId").attr('multiple','multiple');
                }
            }
        });
        $('input[name="data[Reservation][status]"]').change(function(event) {
            var type = $('input[name="data[Reservation][status]"]:checked').val();
            $.ajax({
                url: "reservations/list_room/"+type,
                success: function(data){
                    var data = $.parseJSON(data);
                    var arr_elment = [];
                    arr_elment.push('<option value="">-- Chọn phòng --</option>');
                    $.each(data, function( index, value ) {
                        arr_elment.push('<option value="'+index+'">'+value+'</option>');
                    });
                    $("#ReservationRoomsId").html(arr_elment);
                }
            });
        });

        $("#ReservationBookForm").submit(function(event) {
            var name_guest = $.trim($('#ReservationNameGuest').val());
            var cmt = $.trim($('#ReservationCmt').val());
            var start = $('#ReservationStart').val();
            var end = $('#ReservationEnd').val();
            var room = $('#ReservationRoomsId').val();
            var type = $('input[name="data[Reservation][status]"]:checked').val();
            if(name_guest == ''){
                event.preventDefault();
                $('h5').html('Tên khách hàng không được để trống !');
            }else if(cmt == ''){
                event.preventDefault();
                $('h5').html('Số CMT không được để trống !');
            }else if(start == ''){
                event.preventDefault();
                $('h5').html('Ngày vào không được để trống !');
            }else if(room == ''){
                event.preventDefault();
                $('h5').html('Hãy chọn phòng !');
            }
        });
    })
</script>